<!-- @module messageForm -->
<!-- @author: YunTao.Li -->
<!-- @description:  -->
<!-- @since: 2020-03-19 12:43:43 -->
<template>
  <el-dialog title="站内消息" :visible.sync="dialogFormVisible" width="80%" top="5vh" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" @close="closeDialog">
    <el-form ref="messageForm" :model="messageFormObject" :rules="formFormatRules" :label-position="labelPosition" label-width="120px" size="mini">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18">
          <el-form-item label="消息标题" prop="msgTitle">
            <el-input v-model="messageFormObject.msgTitle" name="msgTitle" placeholder="消息标题" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <el-form-item label="申请单编码" prop="leaveCode">
            <el-input v-model="messageFormObject.leaveCode" name="leaveCode" placeholder="自动生成" :disabled="true" />
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <el-form-item label="时间" prop="sendTime">
            <el-date-picker v-model="messageFormObject.sendTime" style="width:100%;" type="date" name="sendTime" placeholder="时间" value-format="yyyy-MM-dd" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <el-form-item label="请假天数" prop="days">
            <el-input v-model="messageFormObject.days" name="days" placeholder="请假天数" :disabled="true" />
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="请假事由" prop="leaveDesc">
            <el-input v-model="messageFormObject.leaveDesc" name="leaveDesc" placeholder="请假事由" style="width:80%" type="textarea" rows="4" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer" style="margin:10px;text-align: center">
      <el-button @click="onCancel">取 消</el-button>
      <el-button type="primary" @click="onSubmit">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  components: {},
  data() {
    return {
      dialogFormVisible: true,
      leaveBJDisable: true,
      labelPosition: 'right',
      messageFormObject: {
        msgId: '',
        msgTitle: '',
        leaveId: '',
        ouId: '',
        orgCode: '',
        orgName: '',
        deptName: '',
        deptCode: '',
        empName: '',
        empCode: '',
        workYear: '',
        leaveCode: '',
        creationDate: new Date(),
        holidayType: '',
        startDate: null,
        startTimeType: '',
        days: '',
        endDate: null,
        endTimeType: '',
        telephone: '',
        contact: '',
        contactPhone: '',
        isLeaveBj: '',
        leaveTime: '',
        backTime: '',
        position: '',
        leaveDesc: ''
      },
      dateCalcQuery: {
        startDate: null,
        startTimeType: '',
        endDate: null,
        endTimeType: ''
      },
      formFormatRules: {
        ouId: [{
          required: true,
          message: '组织机构不能为空',
          trigger: 'blur'
        }],
        holidayType: [{
          required: true,
          message: '假期类型不能为空',
          trigger: 'blur'
        }],
        startDate: [{
          required: true,
          message: '开始日期不能为空',
          trigger: 'blur'
        }],
        startTimeType: [{
          required: true,
          message: '开始时段不能为空',
          trigger: 'blur'
        }],
        endDate: [{
          required: true,
          message: '结束日期不能为空',
          trigger: 'blur'
        }],
        endTimeType: [{
          required: true,
          message: '结束时段不能为空',
          trigger: 'blur'
        }],
        请假事由: [{
          required: true,
          message: '请假事由不能为空',
          trigger: 'blur'
        }]
      },
      formLabelWidth: '120px'
    }
  },
  computed: {
    cmp_startDate() {
      return this.messageFormObject.startDate
    },
    cmp_startTimeType() {
      return this.messageFormObject.startTimeType
    },
    cmp_endDate() {
      return this.messageFormObject.endDate
    },
    cmp_endTimeType() {
      return this.messageFormObject.endTimeType
    },
    cmp_isLeaveBj() {
      return this.messageFormObject.isLeaveBj
    }
  },
  watch: {
    cmp_startDate(newValue, oldValue) {
      this.daysCalc()
    },
    cmp_startTimeType(newValue, oldValue) {
      this.daysCalc()
    },
    cmp_endDate(newValue, oldValue) {
      this.daysCalc()
    },
    cmp_endTimeType(newValue, oldValue) {
      this.daysCalc()
    },
    cmp_isLeaveBj(newValue, oldValue) {
      if (newValue === '1') {
        this.leaveBJDisable = false
      } else {
        this.leaveBJDisable = true
      }
    }
  },
  mounted() {
    try {
      this.messageFormObject.empCode = localStorage.getItem('empCode')
      this.messageFormObject.empName = localStorage.getItem('empName')
      this.messageFormObject.deptName = localStorage.getItem('deptName')
      this.messageFormObject.deptCode = localStorage.getItem('deptCode')
    } catch (e) {
      console.log(e)
    }
  },
  methods: {
    bindLabel(orgId, label) {
      if (orgId && orgId !== '') {
        this.messageFormObject.ouId = orgId
      }

      if (label && label !== '') {
        this.messageFormObject.orgName = label
      }
    },
    toggele(data) { // 显示此窗口或隐藏
      if (this.dialogFormVisible) {
        this.dialogFormVisible = false
      } else {
        this.dialogFormVisible = true
      }
    },
    onCancel() { // 取消
      this.toggele()
      this.resetFormData()
    },
    onSubmit() { // 保存
      var _this = _this || this
      this.$refs.messageFormObject.validate((valid) => {
        if (valid) {
          _this.dialogFormVisible = false
          _this.$emit('submitFunc', _this.messageForm)
        } else {
          return false
        }
      })
    },
    closeDialog() {
    },
    resetFormData() {
      this.$refs.messageFormObject.resetFields()

      this.messageFormObject.orgName = ''
      this.$refs.orgSelectRef.clearHandle()
    }
  }
}
</script>

<style>
/* .el-date-picker{
  width: 80%
} */
</style>
